<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>拦截器</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
  </head>
  <body>
    <script>
      // 设置请求拦截器
      axios.interceptors.request.use(
        function (config) {
          console.log("请求拦截器 成功");
          console.log(config); // config 配置对象
          // 修改 config 中的参数
          config.params = {
            a: 123,
          };
          config.timeout = 200;
          // 对请求参数进行判断
          if (config.method === "get") {
            return config;
          } else {
            throw "请求方法错误";
          }
        },
        function (error) {
          console.log("请求拦截器 失败");
          return Promise.reject(error);
        }
      );

      // 设置响应拦截器
      axios.interceptors.response.use(
        function (response) {
          console.log("响应拦截器 成功");
          console.log(response);
          // 对响应结果进行判断
          if (response.status === 200) {
            // 处理响应结果
            return response.data;
          } else {
            throw "响应结果错误";
          }
        },
        function (error) {
          console.log("响应拦截器 失败");
          return Promise.reject(error);
        }
      );

      // 发送请求
      axios
        .get("http://localhost:3000/posts/1")
        .then((response) => {
          console.log("自定义回调处理成功的结果");
          console.log(response);
        })
        .catch((reason) => {
          console.log("自定义回调处理失败的结果");
          console.log(reason);
        });
    </script>
  </body>
</html>
